<script setup lang="ts">
import { computed } from 'vue';
import { AdminLayout, LAYOUT_SCROLL_EL_ID } from '@sa/materials';
import type { LayoutMode } from '@sa/materials';
import { useAppStore } from '@/store/modules/app';
import { useThemeStore } from '@/store/modules/theme';
import ClientHeader from './modules/client-header.vue';
import ClientTab from './modules/client-tab/index.vue';
import ClientContent from './modules/client-content.vue';
import ClientFooter from './modules/client-footer.vue';

defineOptions({ name: 'ClientLayout' });

const appStore = useAppStore();
const themeStore = useThemeStore();

const layoutMode = computed((): LayoutMode => 'horizontal');
</script>

<template>
  <AdminLayout
    :mode="layoutMode"
    :scroll-el-id="LAYOUT_SCROLL_EL_ID"
    :scroll-mode="themeStore.layout.scrollMode"
    :is-mobile="appStore.isMobile"
    :full-content="appStore.fullContent"
    :fixed-top="themeStore.fixedHeaderAndTab"
    :header-height="themeStore.header.height"
    :tab-visible="true"
    :tab-height="themeStore.tab.height"
    :content-class="appStore.contentXScrollable ? 'overflow-x-hidden' : ''"
    :sider-visible="false"
    :footer-visible="themeStore.footer.visible"
    :footer-height="themeStore.footer.height"
    :fixed-footer="themeStore.footer.fixed"
    :right-footer="themeStore.footer.right"
  >
    <template #header>
      <!-- <ClientHeader /> -->
    </template>
    <template #tab>
      <ClientTab />
    </template>
    <ClientContent />
    <template #footer>
      <ClientFooter />
    </template>
  </AdminLayout>
</template>

<style scoped>
#__SCROLL_EL_ID__ {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

#__SCROLL_EL_ID__::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

#__SCROLL_EL_ID__::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

#__SCROLL_EL_ID__::-webkit-scrollbar-track {
  background-color: transparent;
}
</style>